<template>
  <div class='container'>
    <el-card shadow="true" >

  <!-- 筛选布局 -->
<el-row>
<!-- 左边 -->
  <el-col :span="22">
  <div class="grid-content bg-purple">
<el-form :inline="true" :model="query" ref='formData' class="demo-form-inline">
  <el-form-item label="关键字" label-width="80px">
    <el-input v-model="query.keyword" style="width:200px" ></el-input>
  </el-form-item>
  <el-form-item label="状态" label-width="80px">
    <el-select v-model="query.state" placeholder="请选择" style="width:200px" >
      <el-option label="已禁用" value="1"></el-option>
      <el-option label="已启用" value="0"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
  <el-button @click="resetForm()">清除</el-button>
  <el-button type="primary" @click="onSubmit">搜索</el-button>
  </el-form-item>
</el-form>
  </div>
  </el-col>
  <!-- 左边结束 -->

  <!--  右边-->
  <el-col :span="2">
  <div class="grid-content bg-purple-light">
    <el-button type="success" icon="el-icon-edit" size="small" @click="addSkill()" >新增技巧</el-button>
  </div>
  </el-col>
  <!-- 右边结束 -->

</el-row>
 <!-- 筛选布局 -->

 <!-- 提示布局 -->
  <el-alert
    :title="alertText"
    :closable=false
    type="info"
    show-icon>
  </el-alert>
 <!-- 提示布局 -->

<!-- 表单布局 -->
<el-table
      :data="dataList"
      style="width: 100%">
  <!-- 序号 -->
      <el-table-column align="left" label="序号" type="index" width="80px">
      </el-table-column>

  <!--文章标题-->
      <el-table-column align="left" label="文章标题" width="375px">
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
              <i class="el-icon-film" v-if="scope.row.videoURL" @click="handleVideo(scope.row.videoURL)"></i>
            </template>
      </el-table-column>

      <!-- 阅读人数 -->
    <el-table-column align="left" label="阅读人数" width="200px">
            <template slot-scope="scope">
              <span>{{scope.row.visits}}</span>
            </template>
      </el-table-column>

      <!-- 录入人 -->
      <el-table-column align="left" label="录入人" width="150px">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
      </el-table-column>

      <!-- 录入时间 -->
      <el-table-column align="left" label="录入时间 " width="200px">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | formData}} </span>
            </template>
      </el-table-column>

      <!-- 状态 -->
      <el-table-column align="leftr" label="状态">
            <template slot-scope="scope">
              <!-- 作用域插槽——————————————————--- -->
              <span v-if="scope.row.state==1">已启用</span>
              <span v-else>已禁用</span>
            </template>
      </el-table-column>

      <!--操作-->
      <el-table-column align="center" label="操作" width="200px">

               <template slot-scope="scope" >
              <el-button  size="mini" @click="ejectPreview(scope.row.id)" type="text">预览</el-button>

              <el-button type="text" size="mini" @click="handleStatus(scope.row)">
                <span v-if="scope.row.state===0">启用</span>
                <span v-else>禁用</span>
              </el-button>

                <!--———————— 删除 ————————————-->
              <el-button
                size="mini"
                type="text"
                @click="removeUser(scope.row.id)"
                :disabled="scope.row.state===0"
              >删除</el-button>

            <el-button
                size="mini"
                type="text"
                @click="modifySkill(scope.row.id)"
                :disabled="scope.row.state===0"
              >修改</el-button>

            </template>

      </el-table-column>

    </el-table>
<!-- 表单布局 -->

<!-- 分頁 -->
<el-row type="flex" justify="end">
  <div class="block" float="right">
    <el-pagination
    style="margin-top:15px"
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
     :current-page="Number(requestParameters.page)"
     :total="Number(total)"
     :page-size="Number(requestParameters.pagesize)"
    :page-sizes="[10,20,30, 50]"
     layout="prev, pager, next, sizes,jumper">
    </el-pagination>
  </div>
</el-row>
<!-- 分頁 -->

<!--新增 -->
    <Dialog ref="modify" title="新增文章" :show-dialog="dialogVisible" @addSkill="getList" @changeDialog="changeDialog"></Dialog>
<!-- --新增 - -->

<!-- 预览文章 -->
<Preview ref="preview" :preview-visible="previewVisible" @handleClose='handleClose'></Preview>
<!-- 预览文章-->

<!--预览视屏 -->
<el-dialog class="yulan"
  :visible.sync="UrlVisible"
 width="400" height="400"
 @close="closed">
<video width="100%" height="100%" controls v-if="videoURL!==null">
    <source :src="videoURL" type="video/mp4">
</video>
</el-dialog>
<!-- /预览视屏 -->

<!-- 卡片结束 -->
    </el-card>
<!--最大的div  -->
  </div>
</template>

<script>
// 引入接口
import { list, remove, changeState } from '@/api/hmmm/articles.js'

// 引入新增组件
import Dialog from './../components/articles-add'

// 引入预览文章组件
import Preview from './../components/articles-preview'

// 引入时间格式函数
import { parseTimeByString } from '@/filters/index'

export default {
  components: {
    Dialog,
    Preview
  },
  filters: {
    formData (val) {
      return parseTimeByString(val, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  data () {
    return {
      // 表单数据
      formInline: {
        user: '',
        region: ''
      },
      // 表格数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      // 共多少数据
      alertText: '',
      // 接收到后端的数据
      dataList: [],
      // 分页相关————————
      // 总页
      total: null,
      // 分页相关
      requestParameters: {
        // 展示多少页
        page: 1,
        // 每页显示个数的选项,
        pagesize: 10
      },
      // 弹出层的变化,默认不显示
      dialogVisible: false,
      // 预览视屏的地址
      videoURL: '',
      // 预览视频是否展示
      UrlVisible: false,
      // 预览文章是否显示
      previewVisible: false,
      // 查询
      query: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      filterquery: {

      },
      //
      isEnabled: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 视频关闭
    closed () {
      this.videoURL = null
    },
    // 点击搜索
    async onSubmit () {
      var query = this.query
      var filterquery = this.filterquery

      for (const key in query) {
        if (query[key] || query[key] === 0) {
          filterquery[key] = query[key]
        }
      }
      const { data: res } = await list(filterquery)
      this.dataList = res.items
    },
    // 点击取消
    resetForm () {
      this.query = {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: ''
      }
      this.getList()
      this.filterquery = {

      }
    },
    // 获取列表数据_________________________________
    async getList (params) {
      const { data: res } = await list(this.requestParameters)
      // 获取数据给dataList
      console.log(res.items)
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共有 ${this.total} 条记录`
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },

    // 删除_________________________________
    removeUser (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(user, 1)
              this.getList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    //
    // 启用、禁用_________________________________
    handleStatus (val) {
      // 设置在页面应该显示的文字
      var status = ''
      // 如果state=1是  开启
      if (val.state === 1) {
        // 把值改为   屏蔽

        val.state = 0
        // 在页面显示文字为  禁用
        status = '启用'
        // 给当前行的后面两个的disabled改为 true
      } else {
        val.state = 1
        status = '禁用'
      }
      var data = {
        id: val.id,
        state: val.state
      }
      this.$confirm('已成功' + status + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await changeState(data)
            .then(response => {
              this.$message.success('已成功' + status + '!')
              this.getList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error(status + '失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },

    // 处理视屏预览
    handleVideo (url) {
      this.UrlVisible = true
      this.videoURL = url
      console.log(this.videoURL)
    },
    // 关闭预览
    handleClose (val) {
      this.previewVisible = val
    },
    // 添加文章技巧是否显示
    addSkill () {
      this.dialogVisible = true
    },
    // 增加的关闭弹层
    changeDialog (val) {
      this.dialogVisible = val
    },
    // 修改
    modifySkill (id) {
      this.dialogVisible = true
      this.$refs.modify.handleDetail(id)
    },
    // 点击事件————把弹框属性改变
    ejectPreview (id) {
      this.previewVisible = true
      this.$refs.preview.handlepreview(id)
    }

    //  jie

  }
}
</script>

<style scoped lang='less'>

.el-alert--info{
  margin-bottom:20px;
}
.el-icon-film{
  color:blue,
}

/deep/ .yulan .el-dialog__body{
  position:absolute;
  padding:0px;
}
/deep/ .yulan div.el-dialog__header{
  padding:0px;
}
/deep/ .yulan .el-dialog__headerbtn .el-dialog__close{
  position: absolute;
    right:350px;
    bottom: 30px;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgba(4,72,105,0.09);
}

</style>
